<template>
  <div>
    <jc-bar>
      <v-spacer></v-spacer>
      花园花朵
      <v-spacer></v-spacer>
    </jc-bar>
    <v-main>
      <v-container>
        <v-list class="transparent">
          <v-list-item class="pa-2" v-for="(item, index) in list" :Key="index">
            <v-card v-ripple @click="to(item._id)" outlined elevation="5" rounded class="rounded-t-lg rounded-b-sm">
              <v-card-text>
                <v-img :src="item.indexImage"></v-img>
              </v-card-text>
              <v-card-title>
                {{ item.title }}
              </v-card-title>
              <v-card-subtitle> 第{{ item._id }}期 </v-card-subtitle>
            </v-card>
          </v-list-item>
        </v-list>
      </v-container>
    </v-main>
  </div>
</template>

<script>
import JcBar from "../../layout/JcBar";
import { getItems } from "../../api/cloudbase-hd.js";
export default {
  name: "index",
  components: {
    JcBar,
  },
  data() {
    return {
      list: [],
      total: 0,
    };
  },
  mounted() {
    getItems(6, 1).then((res) => {
      this.list = res.data;
      this.total = res.total;
    });
  },
  methods: {
    to(id) {
      this.$router.push({
        name: "FlowerPage",
        params: {
          id,
        },
      });
    },
  },
};
</script>

<style scoped></style>
